<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<!-- 把组件当成标签来使用 -->
			<hello-world></hello-world>
			<hello-world></hello-world>

			<hello-js></hello-js>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			// 4. 组键的命名方式
			// 组件名字如果是驼峰写法，如果在页面中当成标签使用，必须改成中划线分隔的方式
			// 但是，在模板字符串中，是可以不用转成中划线形式
			Vue.component('HelloJs', {
				data: function () {
					return {
						name: 'Jerry',
					}
				},
				template: `
          <div>
            <p>我是程序员</p>
          </div>
        `,
			})
			Vue.component('hello-world', {
				// 注意：组件内部的数据，需要写到 data 这个函数中
				data: function () {
					// 在 data 函数内部，必须 return 一个对象，对象里面是当前组件私有的数据
					return {
						name: 'Tom',
						age: 18,
					}
				},
				// template 代表的是页面的模板，也就是页面的结构
				// 模板内部必须有一个根元素，且只有一个，如 <div></div>
				// 组件模板的内容可以是模板字符串（ES6模板），在模板字符串中定义页面结构，使结构更清晰
				template: `
          <div>
            <p><button @click="add">按钮</button></p>
				    <p>{{name}}</p>
				    <p>{{age}}</p>
            <HelloJs></HelloJs>
            <hr>
          </div>
        `,
				methods: {
					add() {
						this.age++
					},
				},
			})

			var vm = new Vue({
				el: '#app',
				data: {},
			})
		</script>
	</body>
</html>
